<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地引入阿里巴巴图标 -->
    <script src="./images/font_2741410_larr1s11fyk/iconfont.js"></script>
    <script src="./images/font_2741410_32pcz6bs08o/iconfont.js"></script>
    <script src="./images/font_2745276_dljv133f95/iconfont.js"></script>
    <script src="./images/yanxuan/iconfont.js"></script>
    <style>
        /* 图标样式 */
        .icon {
            width: 1em; height: 1em;
            color: #CC9756;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .xinghao{
            width: 32px; height: 32px;
            color: #666E67;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .main{
            width: 1348px;
            margin: 0 auto;
        }
        .main .head{
            height: 33px;
            background-color:#333333;
            position: relative;
        }
        /* 头部左侧区域 */
        .main .head .headLeft{
            position: absolute;
            height: 33px;
            width: 360px;
            left: 165px;
        }
        /* 喇叭 */
        .main .head .headLeft .laBa{
            width: 20px;
            height: 33px;
            line-height: 33px;
            float: left;
        }
        /* 广告样式 */
        .main .head .headLeft .gGao{
            width: 340px;
            height: 33px;
            float: left;
            font-size: 12px;
            line-height: 33px;
            text-align: center;
        }
        /* a标签鼠标没悬停时的颜色 */
        .main .head .headLeft .gGao>a{
            color: #CC9756;
        }
        /* 鼠标悬停时的颜色 */
        .main .head .headLeft .gGao>a:hover{
            color: white;
        }
        /* 头部右侧区域 */
        .main .head .headRight{
            width: 480px;
            height: 33px;
            position: absolute;
            right: 165px;
        }
        
        /* 给菜单加样式 */
        .main .head .headRight>ul>li{
            float: left;
            line-height: 33px;
            font-size: 12px;
            width: 68px;
            text-align: center;
            color: #CCCCCC;
            box-sizing: border-box;
        }
        /* 鼠标悬停时字体颜色 */
        .main .head .headRight>ul>li:hover{
            color: white;
        }
        /* 二级菜单 */
        .main .head .headRight>ul>li ul{
            width: 60px;
            position: absolute;
            z-index: 10;
            background-color: white;
            color: #C8C8C8;
            display: none;
            border: 1px solid #DEE1E6;
        }
        /* 二级菜单显示 */
        .main .head .headRight>ul>li:hover ul{
            cursor: pointer;
            display: block;
        }
        /* 二级菜单分割线 */
        .main .head .headRight>ul>li ul li{
            border-bottom:1px solid #C8C8C8;
            margin-top: 0 10px;
        }
        /* 二级菜单字体颜色 */
        .main .head .headRight>ul>li ul li a{
            text-decoration: none;
            color:#C8C8C8 ;
        }
        /* 二级菜单鼠标移动颜色 */
        .main .head .headRight>ul>li ul li a:hover{
            color: #CC9756;
        }
        /* 导航栏 */
        .main .content .conDiv1{
            height: 142px;
            background-color: #FFFFFF;
            box-shadow: #fff;
        }
        /* 导航栏上部 */
        .content .conDiv1 .conDiv1Top{
            height: 90px;
            position: relative;
        }
        /* logo标志 */
        .content .conDiv1 .conDiv1Top .Div1TopLogo{
            height: 50px;
            position: absolute;
            left: 130px;
        }
        /* 搜索框 */
        .content .conDiv1 .conDiv1Top .Div1TopSearch{
            height: 38px;
            position: absolute;
            right: 312px;
            top: 26px;
        }
        /* 搜索框 样式 */
        .content .conDiv1 .conDiv1Top .Div1TopSearch .SearchShuru{
            float: left;
            border: none;
            width: 442px;
            height: 38px;
            border: 1px solid #CC9756;
            border-top-left-radius: 19px;
            border-bottom-left-radius: 19px;
            background-color: #FFFFFF;
        }
        /* input标签样式 */
        .content .conDiv1 .conDiv1Top .Div1TopSearch .SearchShuru input{
            width: 400px;
            height: 38px;
            margin-left: 42px;
            border: none;
            outline: none;
            font-size: 14px;
        }
        /* 搜索框 按钮 */
        .content .conDiv1 .conDiv1Top .Div1TopSearch .SearchBtn{
            float: left;
            width: 90px;
            height: 38px;
            background-color: #CC9756;
            border-top-right-radius: 19px;
            border-bottom-right-radius: 19px;
            cursor: pointer;
            color: #fff;
            line-height: 38px;
            text-align: center;
            font-size: 16px;
        }
        /* 购物车 边框*/
        .content .conDiv1 .conDiv1Top .Div1TopShop{
            position: absolute;
            width: 135px;
            height: 38px;
            top: 26px;
            right: 132px;
            border: 1px solid #CC9756;
            background-color: #fff;
            color: #CC9756;
            border-radius: 19px;
        }
        /*  购物车 样式*/
        .content .conDiv1 .conDiv1Top .Div1TopShop .shopCar{
            font-size: 14px;
            line-height: 38px;
            color: #CC9756;
            text-align: center;
            cursor: pointer;
        }
        /* 购物车图标样式 */
        .content .conDiv1 .conDiv1Top .Div1TopShop .shopCar .iconShopCar{
            width: 1.5em; height: 1.5em;
            color: #CC9756;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        } 
        /* 导航栏下部 */
        .content .conDiv1 .conDiv1Btm{
            width: 1086px;
            height: 30px;
            /* background-color: blue; */
            margin: 0 auto;
            margin-top: 22px;
            position: relative;
        }
        /* 一级导航栏 */
        .content .conDiv1 .conDiv1Btm>div{
            float: left;
            height: 20px;
            margin:5px 20px;
            color: #000;
            font-weight: bold;
        }
        /* 鼠标悬浮时导航栏样式 */
        .content .conDiv1 .conDiv1Btm>div:hover{
            color: #CC9756;
            text-decoration: underline;
            text-decoration-thickness: 5px;
            cursor: pointer;
            
        }
        /* 首页 默认 */
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst1{
            color: #CC9756;
            text-decoration: underline;
            text-decoration-thickness: 5px;
            cursor: pointer;
        }
        /* 分隔符 */
        .content .conDiv1 .conDiv1Btm .fengefu{
            position: absolute;
            right: 265px;
            font-size: 14px;
            font-weight: normal;
            color:  #CCCCCC;
        }

        /* 二级菜单 */
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst9 .secondMenu{
            width: 850px;
            height: 345px;
            background-color:white;
            position: absolute;
            left: 118px;
            top: 30px;
            display: none;
            color: black;
            cursor: auto;
        }
        /* 鼠标移到一级菜单上显示二级菜单 */
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst9:hover .secondMenu{
            display: block;
            display: flex;
            justify-content: space-between;
        }
        /* 二级菜单按钮 */
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst9 .secondMenu>div{
            width: 110px;
            height: 40px;
            border-bottom: 1px solid #E0E0E0;
            margin-top: 10px;
            box-sizing: border-box;
            padding-top: 10px;
            font-size: 20px;
        }
        /* 商品表格样式 */
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst9 .secondMenu>div ul li{
            height: 55px;
            width: 110px;
            margin: 2.6px 5px;
            line-height: 55px;
            text-align: center;
            font-size: 13px;
            font-weight: normal;
            border: 1px solid white;
            box-sizing: border-box;
            position: relative;
        }
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst9 .secondMenu>div ul li:hover{
            color: #CC9756;
            cursor: pointer;
        }
        /* 设置图片大小 */
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst9 .secondMenu>div ul li img{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 2.5px;
            left: 0px; 
        }
        .content .conDiv1 .conDiv1Btm .conDiv1BtmFirst9 .secondMenu>div ul li span{
            position: absolute; 
            left: 51px;
            top: 0px;
        }
        /* 图片样式 */
        .content .conDiv2 img{
            width:1348px;
            height: 420px;
        }
        /* 新品首发 */
        .content .conDiv3{
            height: 510px;
            padding: 20px;
            position: relative;
        }
        /* 上部标题 */
        .content .conDiv3 .conDiv3Title{
            height: 50px;
            margin: 10px 115px;
        }
        /* 标题样式 */
        .content .conDiv3 .conDiv3Title .span1{
            font-size: 28px;
            font-weight: 700;
            line-height: 50px;
            /* float: left; */
            margin-right: 20px;
        }
        /* 标题样式 */
        .content .conDiv3 .conDiv3Title .span3{
            float: right;
            line-height: 50px;
        }
        /* 标题样式 */
        .content .conDiv3 .conDiv3Title .span1:hover{
            cursor: pointer;
            color: #CC9756;
        }
        /* 标题样式 */
        .content .conDiv3 .conDiv3Title .span3:hover{
            cursor: pointer;
            color: #CC9756;
        }
        /* 商品信息 */
        .content .conDiv3 .conDiv3Infor{
            height: 390px;
            margin-bottom: 30px;
            margin-left: 115px;
            margin-right: 115px;
            display: flex;
            justify-content: space-between;
        }
        /* 商品信息外层 */
        .content .conDiv3 .conDiv3Infor>div{
            height: 390px;
            width: 260px;
        }
        /* 商品信息图片 */
        .content .conDiv3 .conDiv3Infor>div .picture img{
            width: 260px;
            margin-bottom: 10px;
            /* height: 260px; */
            /* background-color: red; */
        }
        /* 鼠标移入 商品信息 背景变色 */
        .content .conDiv3 .conDiv3Infor .infoBg:hover{
            background-color: #F4F0EA;
        }
        /* 鼠标点击图片的状态 */
        .content .conDiv3 .conDiv3Infor>div .picture img:hover{
            cursor: pointer;
        }
        /* 商品信息描述 */
        .content .conDiv3 .conDiv3Infor>div .desip div{
            width: 210px;
            margin: 5px auto;
            text-align: center;
        }
        /* 鼠标 手状 */
        .content .conDiv3 .conDiv3Infor>div .desip .desipText:hover{
            cursor: pointer;
            color: #CC9756;
        }
        /* 商品价格颜色 */
        .content .conDiv3 .conDiv3Infor>div .desip .desipPrice{
            color: red;
        }
        /* 父容器 */
        .content .conDiv3 .leftfather{
            height: 3700px;
            position: absolute;
            top: 50px;
            left: 0px;
        }
        /* 父容器 */
        /* 子元素粘性定位 父元素的高度要远远大于子元素的高度*/
        .content .conDiv3 .rightfather{
            height: 3700px;
            position: absolute;
            top: 50px;
            left: 1278px;
        }
        /* 热销榜 */
        .content .conDiv3 .conDiv3Sale{
            width: 108px;
            height: 360px;
            background-color:#FFFFFF;
            position: sticky;
            top: 10px;   
        }
        /* 热销榜边框颜色 */
        .content .conDiv3 .conDiv3Sale{
            border: 1px solid #E2DED6;
        }
        /* 每一格大小 */
        .content .conDiv3 .conDiv3Sale>ul>li{
            width: 108px;
            height: 36px;
        }
        /* 鼠标移到每一个的变化 */
        .content .conDiv3 .conDiv3Sale>ul>li:hover{
            color: #BB3343;
            cursor: pointer;
        }
        /* sapn 标签的样式 */
        .content .conDiv3 .conDiv3Sale>ul>li>span{
            display: inline-block;
            width: 86px;
            height: 35px;
            margin: 0.5px 10px;
            font-size: 13px;
            font-weight: bold;
            border-bottom: 1px solid #E2DED6;
            box-sizing: border-box;
        }
        /* 第一个li的样式 */
        .content .conDiv3 .conDiv3Sale>ul li:nth-child(1){
            box-sizing: border-box;
            text-align: center;
            line-height: 36px;
            border-bottom: 1px solid #E2DED6;
            background-color: #FFFDF6;
        }
        /* 第二个 li 字体颜色 */
        .content .conDiv3 .conDiv3Sale>ul li:nth-child(2){
            color: #BB3343;
        }
        /* 去掉第一个li 的 span标签的下边框 设置字体大小和颜色 */
        .content .conDiv3 .conDiv3Sale>ul li:nth-child(1) span{
            border:none;
            font-size: 16px;
            color: #BB3343;   
        }
        /* 图片大小 */
        .content .conDiv3 .conDiv3Sale>ul>li>span img{
            width: 31px;
            height: 31px;
            float: left;
            margin:2px;
        }
        /* 二维码 */
        .content .conDiv3 .conDiv3Code{
            width: 70px;
            height: 370px;
            background-color:#FFFFFF;
            position: sticky;
            top: 10px;
        }
        /* 每个li标签的大小 */
        .content .conDiv3 .conDiv3Code ul li{
            width: 70px;
            height: 70px;
            border-bottom:1px solid #EAEAEA;
        }
        /* 字体大小 */
        .content .conDiv3 .conDiv3Code ul li p{
            font-size: 13px;
            text-align: center;
        }
        /* 图片位置 */
        .content .conDiv3 .conDiv3Code ul li div{
            margin: 5px auto;
            text-align: center;
        }
        /* 鼠标移动的变化 */
        .content .conDiv3 .conDiv3Code ul li:hover {
            cursor: pointer;
            color: #E2C199;
        }
        .content .conDiv3 .conDiv3Code ul li:hover div svg{
            color: #E2C199;
        }
        /* 人气推荐 */
        .conDiv4{
            box-sizing: border-box;
            height: 700px;
            width: 1348px;
            background-color: #F4F0EA;
            padding: 60px 130px;
        }
        /* 标题栏 */
        .conDiv4 .conDiv4Title {
            box-sizing: border-box;
            padding-bottom: 20px;
            width: 1088px;
            height: 48px;
            padding-bottom: 20px;
        }
        /* 文字样式 */
        .conDiv4 .conDiv4Title span{
            font-size: 14px;
            margin-right: 55px;
        }
        /* 鼠标移动 文字的变化 */
        .conDiv4 .conDiv4Title span:hover{
            color: #B4A078;
            cursor: pointer;
        }
        /* 内容区 */
        .conDiv4 .conDiv4Content{
            height: 532px;
        }
        /* 内容区左侧 */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft{
            width: 388px;
            height: 532px;
            float: left;
            background-color:white;
        }
        /* 图片 */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft .ContentLeftPic{
            width: 388px;
            height: 389px;
            border-bottom: 1px solid #F4F0EA;
            border-top: 1px solid white;
        }
        /* 图片外层 div */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft .ContentLeftPic>div{
            width: 320px;
            height: 320px;
            margin: 34px 35px;
        }
        /* 图片大小 */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft .ContentLeftPic>div>img{
            width: 300px;
            height: 300px;
            margin: 10px 10px;
            transition:height 0.5s linear, width 0.5s linear;
        }
        /* 图片动画 */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft:hover .ContentLeftPic>div>img{
            width: 320px;
            height: 320px;
        }
        /* 图片描述 */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft .ContentLeftInfo{
            width: 388px;
            height: 141px;
            padding-top: 10px;
            box-sizing: border-box;
        }
        /* 图片描述样式 */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft .ContentLeftInfo p{
            width: 240px;
            margin: 23px auto;
            text-align:center;
            font-size: 18px;
            font-weight: bold;
        }
        /* 内容区右侧 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight{
            width: 695px;
            height: 532px;
            margin-left: 5px;
            float: right;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content:space-between
        }
        /* 图片 分布 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight>div{
            width: 227px;
            height: 262px;
        }
        /* 图片大小 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight>div .ContentRightPic{
            width: 227px;
            height: 178px;
            background-color: #fff;
            border-bottom: 1px solid #F4F0EA;
            border-top: 1px solid white;
        }
        /* 图片外层 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight>div .ContentRightPic>div{
            width: 227px;
            height: 178px;
        }
        /* 图片实际大小 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight>div .ContentRightPic>div img{
            width: 200px;
            height: 160px;
            margin:9px 13.5px;
            transition: width 0.5s linear,height 0.5s linear;
        }
        /* 描述区域大小 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight>div .ContentRightInfo{
            width: 227px;
            height: 82px;
            background-color: #fff;
            padding-top: 10px;
            box-sizing: border-box;
        }
        /* 文字样式 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight>div .ContentRightInfo p{
            width: 136px;
            margin: 5px auto;
            font-size: 13px;
            text-align: center;
        }
        /* 右侧图片动画 */
        .conDiv4 .conDiv4Content .conDiv4ContentRight .picture:hover img{
            width: 210px;
            height: 170px;
        }
        /* 鼠标移动 文字颜色发生变化 */
        .conDiv4 .conDiv4Content .conDiv4ContentLeft .ContentLeftInfo p:nth-child(1):hover{
            color: #CC9756;
            cursor: pointer;
        }
        .conDiv4 .conDiv4Content .conDiv4ContentRight>div .ContentRightInfo p:nth-child(1):hover{
            color: #CC9756;
            cursor: pointer;
        }

        /* 居家生活 */
        .conDiv5{
            width: 1348px;
            /* height: 808px; */
            background-color:white;
            padding: 60px 130px 0px 130px;
            box-sizing: border-box;
        }
        /* 内容区 */
        .conDiv5 .conDiv5Con{
            width: 1088px;
            height: 763px;
        }
        /* 标题栏 */
        .conDiv5 .conDiv5Con .conTitle {
            box-sizing: border-box;
            width: 1088px;
            height: 48px;
            padding-bottom: 20px;
        }
        /* 左侧标题栏 */
        .conDiv5 .conDiv5Con .conTitle .titleLeft{
            height: 28px;
            float: left;
            font-size: 28px;
            font-weight: bold;
            line-height: 28px;
        }
        /* 鼠标移动到上面的变化 */
        .conDiv5 .conDiv5Con .conTitle .titleLeft:hover{
            color: #CC9756;
            cursor: pointer;
        }
        /* 右侧标题栏 */
        .conDiv5 .conDiv5Con .conTitle .titleRight{
            
            height: 28px;
            float: right;
            box-sizing: border-box;
            padding-top: 14px;
            font-size: 14px;
        }
        /* span标签样式 */
        .conDiv5 .conDiv5Con .conTitle .titleRight span{
            margin: 0 2px;
            line-height: 14px;
        }
        /* 鼠标移动到上面的变化 */
        .conDiv5 .conDiv5Con .conTitle .titleRight span:nth-child(odd):hover{
            color: #CC9756;
            cursor: pointer;
        }
        /* 鼠标移动到上面的变化 */
        .conDiv5 .conDiv5Con .conTitle .titleRight span:last-child:hover{
            color: #CC9756;
            cursor: pointer;
        }
        /* 第一内容区 */
        .conDiv5 .conDiv5Con .conFirst{
            width: 1088px;
            height: 300px;
            background-color:goldenrod;
        }
        /* 图片大小 */
        .conDiv5 .conDiv5Con .conFirst img{
            width: 1088px;
            height: 300px;
        }
        /* 第二内容区 */
        .conDiv5 .conDiv5Con .conSecond{
            width: 1088px;
            height: 385px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
        }
        /* 每一个格子大小 */
        .conDiv5 .conDiv5Con .conSecond>div{
            width: 265px;
            height: 385px;
        }
        .conDiv5 .conDiv5Con .conSecond>div:hover{
            background-color:pink;
        }
        /* 图片区域 */
        .conDiv5 .conDiv5Con .conSecond>div .secondPic{
            width: 265px;
            height: 300px;
            
        }
        /* 图片描述 */
        .conDiv5 .conDiv5Con .conSecond>div .secondInfo{
            height: 85px;
            width: 265px;
            border: 1px solid white;
            box-sizing: border-box;
        }
        /* 字体样式 */
        .conDiv5 .conDiv5Con .conSecond>div .secondInfo p{
            width: 166px;
            text-align: center;
            font-size: 13px;
            margin: 10px auto;
            font-weight: bold;
        }
        /* 鼠标移动到上面的变化 */
        .conDiv5 .conDiv5Con .conSecond>div .secondInfo p:first-child:hover{
            color: #CC9756;
            cursor: pointer;
        }
        .conDiv5 .conDiv5Con .conSecond>div .secondInfo p:last-child{
            color: red;
            cursor: auto;
        }
        /* 页面底部区域 */
        .main .foot{
            height: 271px;
            background-color: #414141;
        }
        /* 底部 图标 */
        .main .foot .footTop{
            height: 119px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        /* 排列方式 */
        .main .foot .footTop>div{
            width: 250px;
            height: 90px;

            /* border: 1px solid; */
            position: relative;
            
        }
        .main .foot .footTop>div img{
            width: 60px;
            height: 60px;
            margin-top: 15px;
            margin-left: 20%;
        }
        .main .foot .footTop>div span{
            display: inline-block;
            /* width: 102px; */
            height: 60px;
            line-height: 60px;
            position: absolute;
            top: 15px;
        }
        /* 底部详情 */
        .main .foot .footBtm{
            height: 152px;
            padding-top: 10px;
        }
        .main .foot .footBtm div ul{
            color:#999999 ;
            margin: 0 auto;
        }
        .main .foot .footBtm .div1 ul li{
            float: left;
            font-size: 10px;
            text-align: center;
            line-height: 15px;
            margin: 0 3px;
        }
        .main .foot .footBtm .div2 ul li{
            float: left;
            font-size: 10px;
            text-align: center;
            line-height: 15px;
            margin: 0 3px;
        }
        /* a标签样式 */
        .main .foot .footBtm div ul li a{
            color: #999999;
            text-decoration: none;
        }
        .main .foot .footBtm div ul li a:hover{
            color: white;
        }
        .main .foot .footBtm .div1{
            width: 540px;
            height: 15px;
            margin: 0 auto;
        }
        .main .foot .footBtm .div2{
            width: 1100px;
            height: 15px;
            margin: 15px auto;
        }
        
    </style>
</head>
<body>
    <div class="main">
        <!-- 顶部菜单栏 -->
        <div class="head">
            <!-- 喇叭广告 -->
            <div class="headLeft">
                <!-- 喇叭 -->
                <div class="laBa">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laba"></use>
                    </svg>
                </div>
                <!-- 广告 -->
                <div class="gGao"><a href="#">因事件（疫情、特大暴雨、台风）影响，部分地区无法配送公告</a></div>
            </div>
            <!-- 菜单区域 -->
            <div class="headRight">
                <ul>
                    <li>登录/注册&nbsp;&nbsp;|</li>
                    <li>我的顶单&nbsp;&nbsp;&nbsp;|</li>
                    <li>会员&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                    <li>甄选家&nbsp;&nbsp;&nbsp;|</li>
                    <li>企业采购<img src="./images/up.png" alt="">&nbsp;|
                        <ul>
                            <li><a href="#">企业购</a></li>
                            <li><a href="#">礼品卡</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                    </li>
                    <li>客户服务<img src="./images/up.png" alt="">&nbsp;|
                        <ul>
                            <li><a href="#">在线客服</a></li>
                            <li><a href="#">服务中心</a></li>
                            <li><a href="#">商务合作</a></li>
                            <li><a href="#">开放平台</a></li>
                        </ul>
                    </li>
                    <li>APP</li>
                </ul>
            </div>
        </div>
        <!-- 内容区 -->
        <div class="content">
            <!-- 、导航栏 -->
            <div class="conDiv1">
                <!-- 导航栏上部 -->
                <div class="conDiv1Top">
                    <!-- 网易严选标志 -->
                    <div class="Div1TopLogo">
                        <img src="./images/wangyiyanxuan.jpg" alt="">
                    </div>
                    <!-- 搜索栏 -->
                    <div class="Div1TopSearch">
                            <div class="SearchShuru">
                                <input type="text" name="" id="">
                            </div>
                            <div class="SearchBtn">搜索</div> 
                    </div>
                    <!-- 购物车 -->
                    <div class="Div1TopShop">
                        <div class="shopCar">
                            <svg class="iconShopCar" aria-hidden="true">
                                <use xlink:href="#icon-gouwuche"></use>
                            </svg>
                            购物车
                        </div>
                    </div>
                </div>
                <!-- 导航栏下部 -->
                <div class="conDiv1Btm">
                    <!-- 一级导航栏 -->
                    <div class="conDiv1BtmFirst1">首页</div>
                    <div class="conDiv1BtmFirst2">居家生活</div>
                    <div class="conDiv1BtmFirst3">服饰鞋包</div>
                    <div class="conDiv1BtmFirst4">美食酒水</div>
                    <div class="conDiv1BtmFirst5">个护清洁</div>
                    <div class="conDiv1BtmFirst6">母婴亲子</div>
                    <div class="conDiv1BtmFirst7">运动旅行</div>
                    <div class="conDiv1BtmFirst8">数码家电</div>
                    <div class="conDiv1BtmFirst9">严选全球
                        <div class="secondMenu">
                            <!-- 二级菜单按钮 -->
                            <div>进口爆款
                                <ul>
                                    <li> <img src="./images/yxquanqiu-01.jpg" alt=""> <span>口碑好物</span></li>
                                    <li><img src="./images/yxquanqiu-02.jpg" alt=""> <span>大牌补贴</span></li>
                                    <li><img src="./images/yxquanqiu-03.jpg" alt=""> <span>新品速递</span></li>
                                    <li><img src="./images/yxquanqiu-04.jpg" alt=""><span>明星乳胶</span></li>
                                    <li><img src="./images/yxquanqiu-05.jpg" alt=""><span>量贩囤货</span></li>
                            </div>
                            <div>居家餐厨
                                <ul>
                                    <li><img src="./images/yxquanqiu-06.jpg" alt=""><span>床品家纺</span></li>
                                    <li><img src="./images/yxquanqiu-07.jpg" alt=""><span>餐厨用品</span></li>
                                    <li><img src="./images/yxquanqiu-08.jpg" alt=""><span>日用百货</span></li>
                                    <li><img src="./images/yxquanqiu-09.jpg" alt=""><span>家清用品</span></li>
                                </ul>
                            </div>
                            <div>营养保健
                                <ul>
                                    <li><img src="./images/yxquanqiu-10.jpg" alt=""><span>进口乳品</span></li>
                                    <li><img src="./images/yxquanqiu-11.jpg" alt=""><span>滋补保健</span></li>
                                </ul>
                            </div>
                            <div>美食酒水
                                <ul>
                                    <li><img src="./images/yxquanqiu-12.jpg" alt=""><span>酒水饮料</span></li>
                                    <li><img src="./images/yxquanqiu-13.jpg" alt=""><span>休闲美食</span></li>
                                    <li><img src="./images/yxquanqiu-14.jpg" alt=""><span>粮油速食</span></li>
                                </ul>
                            </div>
                            <div>美妆洗护
                                <ul>
                                    <li><img src="./images/yxquanqiu-15.jpg" alt=""><span>美妆个护</span></li>
                                    <li><img src="./images/yxquanqiu-16.jpg" alt=""><span>口腔护理</span></li>
                                    <li><img src="./images/yxquanqiu-17.jpg" alt="">  <span>卫浴用品</span>  </li>
                                </ul>
                            </div>
                            <div>时尚珠宝
                                <ul>
                                    <li><img src="./images/yxquanqiu-18.jpg" alt=""><span>高级珠宝</span></li>
                                    <li><img src="./images/yxquanqiu-19.jpg" alt=""><span>时尚配搭</span></li>
                                </ul>
                            </div>
                            <div>数码电器
                                <ul>
                                    <li><img src="./images/yxquanqiu-20.jpg" alt=""><span>数码电器</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="conDiv1BtmFirst10">为你严选</div>
                    <div class="conDiv1BtmFirst11">众筹</div>
                    <div class="fengefu">|</div>

                </div>
            </div>
            <!-- 轮播图 -->
            <div class="conDiv2">
                <img src="./images/01-picture.webp" alt="">
            </div>
            <!-- 新品首发 -->
            <div class="conDiv3">
                <!-- 上部标题 -->
                <div class="conDiv3Title">
                    <span class="span1">新品首发</span>
                    <span class="span2">为你寻觅世间好物</span>
                    <span class="span3">更多新品 ></span>
                </div>
                <!-- 商品信息 -->
                <div class="conDiv3Infor">
                    <div class="infoBg">
                        <!-- 图片 -->
                        <div class="picture">
                            <img src="./images/boy-01.webp" alt="">
                        </div>
                        <!-- 描述 -->
                        <div class="desip">
                            <div class="desipText">舒适亲肤 纯棉基础百搭圆领长袖T恤打底衫</div>
                            <div class="desipPrice">￥139</div>
                        </div>
                    </div>
                    <div class="infoBg">
                         <!-- 图片 -->
                         <div class="picture">
                            <img src="./images/girl-01.webp" alt="">
                        </div>
                        <!-- 描述 -->
                        <div class="desip">
                            <div class="desipText">利落氛围感，女式百搭圆领缎面感宽松上衣</div>
                            <div class="desipPrice">￥249</div>
                        </div>
                    </div>
                    <div class="infoBg">
                         <!-- 图片 -->
                         <div class="picture">
                            <img src="./images/girl-02.webp" alt="">
                        </div>
                        <!-- 描述 -->
                        <div class="desip">
                            <div class="desipText">复古宫廷风，女式收腰气质尖领设计感衬衫</div>
                            <div class="desipPrice">￥249</div>
                        </div>
                    </div>
                    <div class="infoBg">
                         <!-- 图片 -->
                         <div class="picture">
                            <img src="./images/girl-03.webp" alt="">
                        </div>
                        <!-- 描述 -->
                        <div class="desip">
                            <div class="desipText">穿上气质满分！女式经典风衣式丝质连衣裙</div>
                            <div class="desipPrice">￥370</div>
                        </div>
                    </div>
                </div>
                <!-- 热销榜 -->
                <div class="leftfather">
                    <div class="conDiv3Sale">
                        <ul>
                            <li>
                                <span>-&nbsp;热销榜&nbsp;-</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-01.webp" alt=""> 全站<br>热销榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-02.webp" alt=""> 居家<br>生活榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-03.webp" alt=""> 服饰<br>鞋包榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-04.webp" alt=""> 美食<br>酒水榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-05.webp" alt=""> 数码<br>家电榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-06.webp" alt=""> 个护<br>清洁榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-07.webp" alt=""> 运动<br>旅行榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-09.webp" alt=""> 母婴<br>亲子榜</span>
                            </li>
                            <li>
                                <span> <img src="./images/rexiaobang-10.webp" alt=""> 全球<br>特色榜</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 二维码 -->
                <div class="rightfather">
                    <div class="conDiv3Code">
                        <ul>
                            <li><img src="./images/code.png" alt="" style="width: 70px;height: 70px;"></li>
                            <li style="font-size: 12px; text-align: center;">
                                <p style="color: #666666;">扫码领</p>
                                <p style="color: #BC3B3B;">APP大额</p>
                                <p style="color:#BC3B3B">新人红包</p>
                            </li>
                            <li>
                                <div>
                                    <svg class="xinghao" aria-hidden="true">
                                        <use xlink:href="#icon-xinhao1"></use>
                                    </svg>
                                </div>
                                <p>订阅电子刊</p>
                            </li>
                            <li>
                                <div>
                                    <svg class="xinghao" aria-hidden="true">
                                        <use xlink:href="#icon-kefu"></use>
                                    </svg>
                                </div>
                                <p>在线客服</p>
                            </li>
                            <li>
                                <div>
                                    <a href="#">
                                        <svg class="xinghao" aria-hidden="true">
                                            <use xlink:href="#icon-jiantou-copy-copy-copy"></use>
                                        </svg>
                                    </a>
                                </div>
                                <p>回到顶部</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div></div>
            </div>
            <!-- 人气推荐 -->
            <div class="conDiv4">
                <!-- 标题栏 -->
                <div class="conDiv4Title">
                    <span style="font-size: 28px;font-weight: 700;margin-right: 20px;">人气推荐 </span>
                    <span style="box-sizing: border-box; color: #B4A078; text-decoration:underline; border-bottom: 2px solid #B4A078;">编辑推荐</span>
                    <span>热销总榜</span>
                    <span style="margin-left: 645px;margin-right: 0px;">更多推荐&gt;</span>

                </div>
                <!-- 内容区 -->
                <div class="conDiv4Content">
                    <!-- 内容区左侧 -->
                    <div class="conDiv4ContentLeft">
                        <!-- 图片区域 -->
                        <div class="ContentLeftPic">
                            <div> <img src="./images/renqituijian-01.webp" alt=""> </div>
                        </div>
                        <!-- 文字区域 -->
                        <div class="ContentLeftInfo">
                            <p>口袋里的咖啡馆 浓缩胶囊咖啡液 无糖1袋</p>
                            <p style="color: red; font-weight: normal;">¥21.8</p>
                        </div>
                    </div>
                    <!-- 内容区右侧 -->
                    <div class="conDiv4ContentRight">
                        <div class="picture">
                                <!-- 图片区域 -->
                            <div class="ContentRightPic">
                                <div> <img src="./images/renqituijian-02.webp" alt=""> </div>
                            </div>
                            <!-- 文字区域 -->
                            <div class="ContentRightInfo">
                                <p>红杏干 180克</p>
                                <p style="color: red; font-weight: normal;">¥20</p>
                            </div>
                        </div>
                        <div class="picture">
                                <!-- 图片区域 -->
                                <div class="ContentRightPic">
                                    <div> <img src="./images/renqituijian-03.webp" alt=""> </div>
                                </div>
                                <!-- 文字区域 -->
                                <div class="ContentRightInfo">
                                    <p>惊喜藏在蛋黄里，翻砂卤蛋 245克</p>
                                    <p style="color: red; font-weight: normal;">¥18</p>
                                </div>
                        </div>
                        <div class="picture">
                            <!-- 图片区域 -->
                            <div class="ContentRightPic">
                                <div> <img src="./images/renqituijian-04.webp" alt=""> </div>
                            </div>
                            <!-- 文字区域 -->
                            <div class="ContentRightInfo">
                                <p>无添加蔗糖，苏打饼干 360克</p>
                                <p style="color: red; font-weight: normal;">¥12.8</p>
                            </div>
                        </div>
                        <div class="picture">
                            <!-- 图片区域 -->
                            <div class="ContentRightPic">
                                <div> <img src="./images/renqituijian-05.webp" alt=""> </div>
                            </div>
                            <!-- 文字区域 -->
                            <div class="ContentRightInfo">
                                <p>无添加蔗糖，澳洲进口即食燕麦片 1千克</p>
                                <p style="color: red; font-weight: normal;">¥19</p>
                            </div>
                        </div>
                        <div class="picture">
                            <!-- 图片区域 -->
                            <div class="ContentRightPic">
                                <div> <img src="./images/renqituijian-06.webp" alt=""> </div>
                            </div>
                            <!-- 文字区域 -->
                            <div class="ContentRightInfo">
                                <p>耐冷热不漏，双层咔咔密封保鲜袋 20只装起</p>
                                <p style="color: red; font-weight: normal;">¥12.9</p>
                            </div>
                        </div>
                        <div class="picture">
                            <!-- 图片区域 -->
                            <div class="ContentRightPic">
                                <div> <img src="./images/renqituijian-07.webp" alt=""> </div>
                            </div>
                            <!-- 文字区域 -->
                            <div class="ContentRightInfo">
                                <p>【59选2】新疆长绒棉男式多色圆领T恤</p>
                                <p style="color: red; font-weight: normal;">¥69</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 居家生活 服饰鞋包-->
            <div class="conDiv5">
                <!-- 居家生活 -->
                <div class="conDiv5Con">
                    <!-- 标题栏 -->
                    <div class="conTitle">
                        <!-- 左侧 -->
                        <div class="titleLeft">居家生活</div>
                        <!-- 右侧 -->
                        <div class="titleRight">
                            <span>收纳家饰</span><span>/</span>
                            <span>好物精选</span><span>/</span>
                            <span>疫情防控</span><span>/</span>
                            <span>北欧原木</span><span>/</span>
                            <span>家庭医疗</span><span>/</span>
                            <span>餐厨爆款清单</span><span>/</span>
                            <span>厨房电器</span>
                            <span>查看更多></span>
                        </div>
                    </div>
                    <!-- 第一内容区 -->
                    <div class="conFirst"><img src="./images/jujiashenhuo-01.webp" alt=""></div>
                    <!-- 第二内容区 -->
                    <div class="conSecond">
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/jujiashenhuo-02.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>AB面乳胶独立弹簧床垫 升级款</p>
                                <p>¥2599</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/jujiashenhuo-03.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>双底面淘米洗菜篮</p>
                                <p>¥29.9</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/jujiashenhuo-04.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>新人特价
                                    【新疆棉】全棉针织条纹四件套</p>
                                <p>¥179</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/jujiashenhuo-05.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>升级粒子更舒适，日式和风懒人沙发</p>
                                <p>¥599</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 服饰鞋包 -->
                <div class="conDiv5Con">
                    <!-- 标题栏 -->
                    <div class="conTitle">
                        <!-- 左侧 -->
                        <div class="titleLeft">服饰鞋包</div>
                        <!-- 右侧 -->
                        <div class="titleRight">
                            <span>好物清单</span><span>/</span>
                            <span>男式衬衫</span><span>/</span>
                            <span>男装</span><span>/</span>
                            <span>男式针织衫/卫衣</span><span>/</span>
                            <span>男式外套</span><span>/</span>
                            <span>新疆棉系列</span><span>/</span>
                            <span>凉感系列</span>
                            <span>查看更多></span>
                        </div>
                    </div>
                    <!-- 第一内容区 -->
                    <div class="conFirst"><img src="./images/fushi-01.webp" alt=""></div>
                    <!-- 第二内容区 -->
                    <div class="conSecond">
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/fushi-02.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>女式天丝棉柔中腰小脚裤</p>
                                <p>¥109</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/fushi-03.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>女式咖啡碳+5℃保暖内衣1.0</p>
                                <p>¥89</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/fushi-04.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>女式皮毛一体雪地靴</p>
                                <p>¥228</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/fushi-05.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>32功能区格，男式商务出行机能双肩包</p>
                                <p>¥349</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 美食酒水 -->
                <div class="conDiv5Con">
                    <!-- 标题栏 -->
                    <div class="conTitle">
                        <!-- 左侧 -->
                        <div class="titleLeft">美食酒水</div>
                        <!-- 右侧 -->
                        <div class="titleRight">
                            <span>爆款美食</span><span>/</span>
                            <span>奥运特惠</span><span>/</span>
                            <span>七夕无门槛9折</span><span>/</span>
                            <span>七夕多商品券</span><span>/</span>
                            <span>美味上新</span><span>/</span>
                            <span>夏日美食</span><span>/</span>
                            <span>饼干糕点</span>
                            <span>查看更多></span>
                        </div>
                    </div>
                    <!-- 第一内容区 -->
                    <div class="conFirst"><img src="./images/meishi-01.webp" alt=""></div>
                    <!-- 第二内容区 -->
                    <div class="conSecond">
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/meishi-02.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>每日坚果亚麻籽谷物燕麦片 600克</p>
                                <p>¥58</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/meishi-03.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>高钙高蛋白，脆脆虾 20克</p>
                                <p>¥18</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/meishi-04.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>养出好气色，牡丹韵四味阿胶糕礼盒 600克</p>
                                <p>¥268</p>
                            </div>
                        </div>
                        <div>
                            <!-- 图片 -->
                            <div class="secondPic"><img src="./images/meishi-05.webp" alt=""></div>
                            <!-- 描述 -->
                            <div class="secondInfo">
                                <p>古法黑糖 168克</p>
                                <p>¥19</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="foot">
            <!-- 图标区域 -->
            <div class="footTop">
                <div>
                    <img src="./images/wangyi.jpg" alt="">
                    <span>网易自营电商</span>
                </div>
                <div>
                    <img src="./images/anquan.jpg" alt="">
                    <span>30天无忧退换货</span>
                </div>
                <div>
                    <img src="./images/wuliu.jpg" alt="">
                    <span>满99元免费邮</span>
                </div>
                <div>
                    <img src="./images/pingzhi.jpg" alt="">
                    <span>品质保证</span>
                </div>
            </div>
            <!-- 详细信息 -->
            <div class="footBtm">
                <div class="div1">
                    <ul>
                        <li><a href="#">关于我们</a><span>|</span></li>
                        <li><a href="#">帮助中心</a><span>|</span></li>
                        <li><a href="#">售后服务</a><span>|</span></li>
                        <li><a href="#">配送与验收</a><span>|</span></li>
                        <li><a href="#">商务合作</a><span>|</span></li>
                        <li><a href="#">企业采购</a><span>|</span></li>
                        <li><a href="#">搜索推荐</a><span>|</span></li>
                        <li><a href="#">友情连接</a><span>|</span></li>
                        <li><a href="#">廉政举报</a></li>
                    </ul>
                </div>
                <div class="div2">
                    <ul>
                        <li><a href="#">食品经营许可证：JY13301080111719</a></li>
                        <li><a href="#">出版物经营许可证：新出发滨字第0132号</a></li>
                        <li>妙得ICP证号：ICP 证浙B2-20160106</li>
                        <li><a href="#">浙杭食药监械经营备20171029号</a></li>
                        <li><a href="#">营业执照</a></li>
                        <li>网易公司版权所有&copy;1997-2021</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>